<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%
	User user = (User) request.getAttribute("user");
    String data = (String) request.getAttribute("data");
    Boolean loggedIn = (Boolean) request.getAttribute("loggedIn");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Expires" content="-1" >
<title>Hotweb</title>
<link rel="stylesheet" href="http://hotwebproxy.appspot.com/assets/style/common.css" type="text/css">
<link rel="stylesheet" href="http://hotwebproxy.appspot.com/assets/style/custom.css" type="text/css">
<style type="text/css">
<%--
body { 
	background-image: url('http://wallpapersdepot.com/wallpapers/bamboo-drawing-1280x800.jpg'); 
	background-attachment: fixed; 
	background-repeat: no-repeat; 
	background-position: center center; 
}
--%>
.wrapper { 
	margin-top: 32px;
	margin-bottom: auto;
	margin-left: 32px;
	margin-right: 32px;
	width: 800px; 
	text-align: left; 
	border: none; 
	clear: both;
}

.section-title {
	padding-left: 8px; 
	padding-right: 8px; 
	font-size: large;
	clear: both;
	text-align: left; 
}

.section {
	padding-left: 8px; 
	padding-right: 8px; 
	clear: both;
	text-align: left; 
}
</style>

<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAk4kw-fYBzjizex9DHmmuXBSSoBz1sb4nFR_F9xgzOIXLsu5DxhRLXs9wmoRrDDngUCMjbQ7tSNBeBg"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://hotwebproxy.appspot.com/assets/script/uri-1.0.js"></script>
<script type="text/javascript" src="http://hotwebproxy.appspot.com/assets/script/blacktea-1.0.js"></script>
<script type="text/javascript" src="http://hotwebproxy.appspot.com/assets/script/common.js"></script>
<script type="text/javascript" src="http://talkgadget.google.com/talkgadget/channel.js"></script>

<jsp:include page="blacktea/siteinfo.jsp" />
<jsp:include page="blacktea/app.jsp" />
<jsp:include page="blacktea/peer.jsp" />

<script type="text/javascript">
var spinner = '<img src="http://hotwebproxy.appspot.com/assets/image/spin.gif" alt="Please wait..." style="color: #fff;"><span style="color: #fff; font-size: xx-large;">...<blink>.....</blink></span>';

$.ajaxSetup ({  
	cache: false  
}); 

var data = <%= data %>;
var cdata = {};

function showError(msg) {
	$('#status').html(msg).css({ "color": "#ff0000" });
}

function showBusy(timeout, msg) {
	var tag = $('#status');
	
	var t = timeout || 3000;
	var m = msg || '';
	tag.html(spinner);
	var timer = setTimeout(function(){ tag.html(m).css({ "color": "#ff0000" }); }, t);
	
	this.cancel = function() {
		clearTimeout(timer);
		tag.empty();
	}
	
	return this;
}

$(document).ready(function(){
	$.fullScreen();
	
	$('a.ajax').live('click', function() {
		var link = $(this).attr('href');
    	$('#page-content').html(spinner).load(link);
    	return false;
	});
	//
	$.initOptionMenu();
	//$.disableContextMenu();
	initMenubar();
	
	initPage();
});

function initMenubar() {
	if (data) {
		$('#userid').html(data.user);
	}
}

function initPage() {
	document.title = 'Hotweb';
	$('#localnet').hide();
	
	hideHome();
	
	var busy = showBusy(5000, 'Timeout, please try again. Make sure Hotweb services are running on your Android device.');
	
	//init channel
	$.getJSON('http://hotwebproxy.appspot.com/channel?type=json&callback=?', function(d) {
		busy.cancel();
		
		if (d.token) {
			openChannel(d);
			loadHomeData();
		} else if (d.error) {
			showError(d.error);
		}
	});
}

function openChannel(d) {
	cdata = d;

	var ch = new goog.appengine.Channel(d.token);
	var handler = {
		'onopen':  function() {},
		'onmessage': function(m) {
			var rd = JSON.parse(m.data);
			if (rd) {
				handleMessage(rd);
			}
		},
		'onerror': function() {
			showError('Failed');
		},
		'onclose': function() {}
	};
	
	ch.open(handler);
}

function handleMessage(rd) {
	var tag = rd.tag || '';
	var sa = tag.split('_', 2);
	var action = sa[0];
	switch(action) {
	case 'home':
		data = rd.data;
		showHome(data);
		showLocal(data);
		break;
	case 'appicon':
		$('#'+tag).attr('src', rd.link);
		break;
	case 'avatar':
		$('#avatar').attr('src', rd.link);
		break;
	default:
	}
}

function loadHomeData() {
	var busy = showBusy(5000, 'Timeout.');
	
	var peer = data.peer;
	var url = URI.parse('http://hotwebproxy.appspot.com/home?type=json&tag=home')
		.param('peer', peer)
		.param('cid', cdata.cid);

	$.getJSON(url + '&callback=?', function(d) {
		busy.cancel();
		
		if (d && d.error) {
			showError(d.error);
		} else {
			$('#site-panel').show();
		}
	});
	return false;
}

function showLocal(rd) {
	var local = $('#localnet');
	
	if (rd) {
		var peer = rd.jid;
		//test ip = 'localhost';
		var url = URI.create({scheme: 'http', host: rd.ip, port: rd.port, path: '/home', query: 'type=json'}); 
		$.getJSON(url + '&callback=?', function(d) {
			if (d && d.jid == peer) {
				local.show();
				$('#localnet_link').attr('href', (url.param('type', 'html').param('peer', peer)));
			}
		});
	} else {
		local.hide();
	}
	return false;
}
</script>

<script type="text/javascript">
function hideHome() {
	$('#site-panel').hide();
	$('#application-panel').hide();
	$('#peer-panel').hide();
}

function showHome(d) {
	showTitle(d);
	showSiteInfo(d);
	showApps(d);
	showPeers(d);
}

function showSiteInfo(d) {
	var sitepanel = $('#site-panel');
	var siteinfo = $('#site-info', sitepanel);
	
	if (d) {
		sitepanel.show();
		siteinfo.html(formatSiteInfo(d));
	} else {
		sitepanel.hide();
	}
}

function showApps(d, peer) {
	var apppanel = $('#application-panel');
	var applist = $('#application-list', apppanel);
	apppanel.show();
	if (d && d.apps && d.apps.length > 0) { 
		applist.html(formatApp(d, peer)); 
	} else { 
		applist.empty(); 
	}
}

function showPeers(d, app) {
	var peerpanel = $('#peer-panel');
	var peerlist = $('#peer-list', peerpanel);
	peerpanel.show();
	if (d && d.peers && d.peers.length > 0) { 
		peerlist.html(formatPeer(d, app)); 
	} else { 
		peerlist.empty(); 
	}
}

function showTitle(d, def) {
	var title = (d ? d['site.name'] || d['site.id'] : (def ? def : 'Hotweb'));
	document.title = title;
}
</script>
</head>
<body >

<div id="topnav">
	<a class="logo" href="/" title="Access your device from a browser">
	<img id="logo_image" class="icon32" src="/favicon.png"  alt="Hotweb" >
	<span id="logo_title">Hotweb</span>
	</a>

	<span class="top-right" style="margin-right: 8px;">
		<span class="action" id="userid"></span>&nbsp;&nbsp;
		<span class="action"><a href="/help" target="_help">Help</a></span>&nbsp;|&nbsp;
<% if (loggedIn) { %>
		<span class="action index-logout"><a href="/logout">Logout</a></span>
<% } else { %>
		<span class="action index-login"><a href="/login">Login</a></span>	
<% } %>
		<span id="localnet"><a id="localnet_link" href="#" title="Switch to local/WiFi"><img src="http://hotwebproxy.appspot.com/assets/opt/tango-icon-theme/22x22/devices/network-wireless.png" /></a></span>
	</span>
</div>

<!--page content-->
<div id="page-content">

<span id="status"></span>

<div id="site-panel" style="display: none; #e8eefa" class="wrapper">
<div id="site-info" class="section"><img src="http://hotwebproxy.appspot.com/assets/image/spin.gif" alt="Please wait..." style="color: #fff;"></div>
</div>

<div id="application-panel" class="wrapper">
<div class="section-title"></div>
<div id="application-list" class="section"></div>
</div>

<div id="peer-panel" class="wrapper">
<div class="section-title"></div>
<div id="peer-list" class="section"></div>
</div>


</div>
<!--//page content-->

<div id="optionmenu">
<a href="/" title="Home" ><img src="http://hotwebproxy.appspot.com/res/drawable/ic_menu_home.png" alt="" ></a>
<a href="/help" title="Help" target="_help"><img src="http://hotwebproxy.appspot.com/res/drawable/ic_menu_help.png" alt="" ></a>
<% if (loggedIn) { %>
<a class="index-logout" href="/logout" title="Logout"><img src="http://hotwebproxy.appspot.com/res/drawable/ic_menu_logout.png" alt="" ></a>
<% } else { %>
<a class="index-login" href="/login" title="Login"><img src="http://hotwebproxy.appspot.com/res/drawable/ic_menu_login.png" alt="" ></a>
<% } %>
</div>

<div id="footer">Hotweb 1.0.0 &copy; 2010 All rights reserved</div>
<%--
http://hotwebproxy.appspot.com/assets/image/bg_blue_sky.jpg
http://www.android.com/media/wallpaper/android-wallpaper3_1024x768.png
http://www.android.com/media/android_vector.jpg 
--%>
<!-- -->
<div id="wallpaper" style="display: block;"><img src="http://hotwebproxy.appspot.com/assets/image/bg_blue_sky.jpg" width="100%" height="100%" alt=""></div>

</body>
</html>

